<template>
  <div class="discounts">
    <p class="title">优惠活动</p>
    <div class="content-wrapper" ref="content-wrapper">
      <div class="content">
        <div class="item" @click="push">
          <div class="item-image">
            <img src="../../../../static/test03.png" alt="" style="width: 100%;height: auto;">
          </div>
          <div class="name">10元特惠《大话西游2018》</div>
        </div>
        <div class="item">
          <div class="item-image">
            <img src="../../../../static/test03.png" alt="" style="width: 100%;height: auto;">
          </div>
          <div class="name">10元特惠《大话西游2018》</div>
        </div>
        <div class="item">
          <div class="item-image">
            <img src="../../../../static/test03.png" alt="" style="width: 100%;height: auto;">
          </div>
          <div class="name">10元特惠《大话西游2018》</div>
        </div>
        <div class="item">
          <div class="item-image">
            <img src="../../../../static/test03.png" alt="" style="width: 100%;height: auto;">
          </div>
          <div class="name">10元特惠《大话西游2018》</div>
        </div>
        <div class="item">
          <div class="item-image">
            <img src="../../../../static/test03.png" alt="" style="width: 100%;height: auto;">
          </div>
          <div class="name">10元特惠《大话西游2018》</div>
        </div>
        <div class="item">
          <div class="item-image">
            <img src="../../../../static/test03.png" alt="" style="width: 100%;height: auto;">
          </div>
          <div class="name">10元特惠《大话西游2018》</div>
        </div>
        <div class="item">
          <div class="item-image">
            <img src="../../../../static/test03.png" alt="" style="width: 100%;height: auto;">
          </div>
          <div class="name">10元特惠《大话西游2018》</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import BScroll from 'better-scroll'
    export default {
        name: "discounts",
        methods:{
          push(){
            // alert()
          }
        },
        mounted() {
          this.$nextTick(()=>{
            if(!this.scroll){
              let scroll = new BScroll(this.$refs['content-wrapper'],{click:true})
            }else {
              this.scroll.refresh();
            }
          })
        }
    }
</script>

<style scoped lang="stylus">
  .discounts
    padding 15px 10px
    height 100%
    .title
      height 22px
      line-height 22px
      text-align center
      color #ffffff
      font-size 16px
    .content-wrapper
      overflow hidden
      height calc(100% - 22px)
      margin-top 10px
      .content
        padding-bottom 5px
        .item
          margin 10px 0 21px 0
          .item-image
            font-size 0
            border-radius 6px
            overflow hidden
          .name
            color #ffffff
            text-align left
            font-size 16px
            height 22px
            line-height 22px
            margin-top 7px
</style>
